<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled />
            </el-form-item>

            <template>
                <p style="text-align: center; margin: 0 0 20px">Color管理</p>
                <div style="text-align: center">
                    <el-transfer
                    style="text-align: left; display: inline-block"
                    v-model="value1"
                    :left-default-checked="[]"
                    :right-default-checked="[]"
                    :render-content="renderFunc"
                    :titles="['正常', '隐藏']"
                    :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}'
                    }"
                    @change="handleChange1"
                    :data="color">
                    </el-transfer>
                </div>

                <p style="text-align: center; margin: 0 0 20px">Size管理</p>
                <div style="text-align: center">
                    <el-transfer
                    style="text-align: left; display: inline-block"
                    v-model="value2"
                    :left-default-checked="[]"
                    :right-default-checked="[]"
                    :render-content="renderFunc"
                    :titles="['正常', '隐藏']"
                    :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}'
                    }"
                    @change="handleChange2"
                    :data="cup">
                    </el-transfer>
                </div>

                <p style="text-align: center; margin: 0 0 20px">Cup管理</p>
                <div style="text-align: center">
                    <el-transfer
                    style="text-align: left; display: inline-block"
                    v-model="value3"
                    :left-default-checked="[]"
                    :right-default-checked="[]"
                    :render-content="renderFunc"
                    :titles="['正常', '隐藏']"
                    :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}'
                    }"
                    @change="handleChange3"
                    :data="size">
                    </el-transfer>
                </div>
            </template>

            <el-form-item>
                <el-button type="primary" @click="submitForm">确认修改 </el-button>
                <el-button type="warning" @click="cancel">取消 </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditSkuForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            color: [],
            cup: [],
            size: [],
            value1: [],
            value2: [],
            value3: [],
            renderFunc(h, option) {
            return <span>{ option.yingwen } - { option.zhongwen }</span>;
            },
            rules: {},
            form: {},
            api: {
                skumanage: `/admin/product.info/skumanage`,
            },
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form.id = nval.id
                        this.color = nval.color
                        this.cup = nval.cup
                        this.size = nval.size
                        this.value1 = nval.color_soft
                        this.value2 = nval.cup_soft
                        this.value3 = nval.size_soft
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        handleChange1(value1) {
            this.form.color = value1;
        },
        handleChange2(value2) {
            this.form.cup = value2;
        },
        handleChange3(value3) {
            this.form.size = value3;
        },
        // 取消按钮
        cancel() {
            this.$emit('editSkuFormCancel')
        },
        submitForm() {
            // console.log('test',this.form);
            this.$emit('submitSkuForm', this.form)
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
<style>
    .transfer-footer {
        margin-left: 20px;
        padding: 6px 5px;
    }
</style>